import React from 'react';
import { Form, Button, Row, Col, Typography, Tooltip } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import NumberField from './NumberField';
import StatefulCalculationCard from './StatefulCalculationCard';
import type { ResultItem } from '../../../shared/types';

const { Title } = Typography;

/**
 * DynamicCard组件 - 动态输入卡片组件
 * 提供动态增减输入项功能，支持固定参数配置，用于各种计算场景
 * 基于Ant Design构建，使用Form.List管理动态表单项
 */

/**
 * 动态输入项类型定义
 * 表示表单中的每个可变输入项的数据结构
 */
export interface DynamicInputItem {
  value: number; // 输入项的值，数值类型
}

/**
 * 创建默认输入项
 * 确保输入值的类型安全
 */
const createDefaultInput = (defaultInputValue: number = 0): DynamicInputItem => ({ 
  value: typeof defaultInputValue === 'number' ? defaultInputValue : 0 
});

/**
 * 动态计算参数类型定义
 * 表示整个表单的数据结构，包含动态输入项和固定参数
 */
export interface DynamicCalculationValues {
  inputs: DynamicInputItem[]; // 动态输入项数组
  [key: string]: any; // 其他固定参数，使用索引签名以支持任意属性名
}

/**
 * 固定参数配置接口
 * 用于配置表单中的固定参数字段
 */
export interface FixedParameterConfig {
  name: string; // 参数的唯一标识符，用于表单数据绑定
  label: string; // 参数的显示标签
  required?: boolean; // 是否为必填项，默认为非必填
  min?: number; // 最小值限制
  max?: number; // 最大值限制
  step?: number; // 输入步进值
  defaultValue?: number; // 默认值
  tooltip?: string; // 提示文本，显示在输入框旁
}

/**
 * 动态输入表单组件接口定义
 * 定义DynamicInputForm组件的所有可配置属性
 */
interface DynamicInputFormProps {
  minInputs?: number; // 最小输入项数量，默认为2
  maxInputs?: number; // 最大输入项数量，默认为10
  defaultInputValue?: number; // 新增输入项的默认值，默认为2
  inputLabelFormatter?: (index: number) => string; // 输入项标签格式化函数
  fixedParameters?: FixedParameterConfig[]; // 固定参数配置数组
  disableAddInput?: boolean; // 是否禁用添加输入项按钮
  disableRemoveInput?: boolean; // 是否禁用删除输入项按钮
}

/**
 * 动态输入表单组件实现
 * 使用Ant Design Form.List管理动态增减的输入项
 * 支持左右布局：左侧动态输入项，右侧固定参数
 */
export const DynamicInputForm: React.FC<DynamicInputFormProps> = ({
  minInputs = 2, // 设置最小输入项数量的默认值
  maxInputs = 10, // 设置最大输入项数量的默认值
  defaultInputValue = 2, // 设置新添加输入项的默认值
  inputLabelFormatter = (index: number) => `输入项 ${index + 1}`, // 默认的输入项标签格式化函数
  
  fixedParameters = [], // 默认空数组，无固定参数
  disableAddInput = false, // 默认启用添加输入项功能
  disableRemoveInput = false // 默认启用删除输入项功能
}) => {
  // 安全处理maxInputs，确保其为有效的非负整数
  // 如果maxInputs无效，则设为Infinity表示无上限
  const safeMax = maxInputs && maxInputs > 0 ? Math.max(minInputs || 0, Math.floor(maxInputs)) : Infinity;
  
  // 使用外部定义的createDefaultInput函数

  return (
    <Row gutter={[8, 16]} className="dynamic-card-container">
      {/* 左侧：动态输入项 - 使用Form.List */}
      <Col xs={24} md={fixedParameters.length > 0 ? 16 : 24} lg={fixedParameters.length > 0 ? 16 : 24} xl={fixedParameters.length > 0 ? 16 : 24} style={{ width: '100%', maxWidth: 'none' }}>
          <Title level={4} className="dynamic-card-title">动态输入项</Title>
          
          {/* 使用Form.List管理动态输入项 */}
          <Form.List
            name="inputs"
            rules={[
              {
                // 自定义验证规则，确保输入项数量不低于最小值
                validator: async (_, inputs) => {
                  if (!inputs || inputs.length < minInputs) {
                    return Promise.reject(new Error(`至少需要${minInputs}个输入项`));
                  }
                },
              },
            ]}
          >
            {(fields, { add, remove }, { errors }) => (
              <>
                {fields.map((field, index) => (
                  <Form.Item
                    key={field.key}
                    label={inputLabelFormatter(index)}
                    required={true}
                    labelCol={{
                      xs: { span: 24 },
                      sm: { span: 8 },
                    }}
                    wrapperCol={{
                      xs: { span: 24 },
                      sm: { span: 16 },
                    }}
                    className="dynamic-card-form-item" // 使用CSS类名
                  >
                    <Row align="middle" gutter={[4, 0]}>
                      <Col flex="auto">
                        <Form.Item
                          name={[field.name, 'value']}
                          validateTrigger={['onChange', 'onBlur']}
                          rules={[
                            {
                              required: true,
                              message: '请输入有效值',
                            },
                          ]}
                          noStyle
                        >
                          <NumberField
                            name={[field.name, 'value']}
                            label={''}
                            required
                            step={0.001}
                            style={{ width: '100%' }}
                          />
                        </Form.Item>
                      </Col>
                      
                      {/* 删除按钮 - 只有当允许删除且数量大于最小值时才显示 */}
                      {/* 防止用户删除至少于minInputs数量 */}
                      {!disableRemoveInput && fields.length > minInputs && (
                        <Col>
                          <Tooltip title="删除此输入项">
                            <Button
                              type="text"
                              danger
                              icon={<MinusOutlined />}
                              onClick={() => remove(field.name)}
                              size="small"
                            />
                          </Tooltip>
                        </Col>
                      )}
                    </Row>
                  </Form.Item>
                ))}
                
                {/* 添加输入项按钮 */}
                {!disableAddInput && (
                  <Form.Item className="dynamic-card-add-button">  {/* 使用CSS类名 */}
                    <Button
                      type="dashed"
                      onClick={() => add(createDefaultInput(defaultInputValue))} // 点击时添加一个默认输入项
                      block
                      icon={<PlusOutlined />}
                      disabled={fields.length >= safeMax} // 当达到最大数量时禁用
                      size="middle"
                    >
                      添加输入项
                    </Button>
                  </Form.Item>
                )}
                
                {/* 错误提示 */}
                <Form.ErrorList errors={errors} />
              </>
            )}
          </Form.List>
        </Col>
        
        {/* 右侧：固定参数区域 */}
        {/* 只有当有固定参数时才渲染此区域 */}
        {fixedParameters.length > 0 && (
          <Col xs={24} md={8} lg={8} xl={8} style={{ width: '100%', maxWidth: 'none' }}>
            <Title level={4} className="dynamic-card-title">固定参数</Title>
            {/* 遍历渲染所有固定参数 */}
            {fixedParameters.map((param) => (
              <div key={param.name.toString()} className="fixed-parameter-item">  {/* 使用CSS类名 */}
                <NumberField
                  name={param.name} // 绑定到表单字段名
                  label={param.label} // 显示标签
                  required={param.required} // 是否必填
                  min={param.min} // 最小值
                  max={param.max} // 最大值
                  step={param.step} // 步进值
                  defaultValue={param.defaultValue} // 默认值
                  tooltip={param.tooltip} // 提示信息
                  style={{ width: '100%' }} // 添加这一行以匹配动态输入项的宽度样式
                />
              </div>
            ))}
          </Col>
        )}
      </Row>
  );
};

/**
 * 动态卡片组件接口定义
 * 定义DynamicCard组件的所有可配置属性
 */
interface DynamicCardProps {
  title: string; // 卡片标题
  formKey: string; // 表单唯一标识，用于状态管理和防冲突
  calculationType: string | ((values: any) => string); // 计算类型，字符串或返回计算类型的函数
  minInputs?: number; // 最小输入项数量，默认2
  maxInputs?: number; // 最大输入项数量，默认10
  defaultInputValue?: number; // 新增输入项的默认值，默认2
  inputLabelFormatter?: (index: number) => string; // 输入项标签格式化函数
  fixedParameters?: FixedParameterConfig[]; // 固定参数配置数组
  columnCount?: number; // 表单布局列数，默认1
  tableHeight?: number; // 结果表格高度，默认400px
  formula?: string; // 计算公式展示文本
  resultFormatter?: (data: any) => ResultItem[]; // 结果格式化函数
  disableAddInput?: boolean; // 是否禁用添加输入项按钮
  disableRemoveInput?: boolean; // 是否禁用删除输入项按钮
  defaultInputs?: DynamicInputItem[]; // 自定义初始输入项数组
}

/**
 * 动态卡片组件实现
 * 封装了动态输入表单和计算结果展示的完整组件
 * 使用StatefulCalculationCard提供状态管理和计算功能
 */
const DynamicCard: React.FC<DynamicCardProps> = ({
  title, // 卡片标题
  formKey, // 表单唯一键，用于标识不同的表单实例
  calculationType, // 计算类型或计算类型生成函数
  minInputs = 2, // 最小输入项数量默认值
  maxInputs = 10, // 最大输入项数量默认值
  defaultInputValue = 2, // 新增输入项默认值
  inputLabelFormatter = (index) => `输入项 ${index + 1}`, // 默认输入标签格式化函数
  fixedParameters = [], // 默认无固定参数
  columnCount = 1, // 表单布局默认1列
  tableHeight = 400, // 结果表格默认高度400px
  formula, // 计算公式显示文本
  // 默认结果格式化函数，生成总和和平均值
  resultFormatter = (data: any) => [
    { key: 'sum', name: '总和', value: data.sum, unit: '' },
    { key: 'average', name: '平均值', value: data.average, unit: '' }
  ],
  disableAddInput = false, // 默认启用添加功能
  disableRemoveInput = false, // 默认启用删除功能
  defaultInputs // 用户自定义的初始输入项
}) => {
  // 使用外部定义的createDefaultInput函数
  
  /**
   * 使用React.useMemo计算表单初始值
   * 避免不必要的重复计算，仅在依赖项变化时重新计算
   */
  const formInitialValues = React.useMemo(() => {
    // 安全处理minInputs，确保为有效的非负整数
    const safeMin = minInputs && minInputs >= 0 ? Math.floor(minInputs) : 1;
    
    // 获取用户提供的初始值，确保是数组类型
    let userInputs = Array.isArray(defaultInputs) ? defaultInputs : [];
    
    // 如果用户提供的输入项不足最小值，补充默认输入项
    if (userInputs.length < safeMin) {
      const defaultInputsArray = Array.from({ length: safeMin - userInputs.length }, () => createDefaultInput(defaultInputValue));
      userInputs = [...userInputs, ...defaultInputsArray];
    }
    
    // 验证并规范化输入项，确保每个输入项都有有效的value字段
    // 将value转换为数字类型，保证类型一致性
    const validatedInputs = userInputs.map(input => ({
      value: input?.value !== undefined ? Number(input.value) : createDefaultInput(defaultInputValue).value
    }));
    
    const result: DynamicCalculationValues = {
      inputs: validatedInputs
    };
    
    // 为固定参数设置默认值
    // 遍历fixedParameters数组，将每个参数的默认值添加到结果对象中
    if (fixedParameters.length > 0) {
      fixedParameters.forEach(param => {
        if (param.defaultValue !== undefined) {
          // 使用toString()确保name是字符串类型，避免对象属性名类型问题
          result[param.name.toString()] = param.defaultValue;
        }
      });
    }
    
    return result;
  }, [minInputs, defaultInputValue, defaultInputs, fixedParameters]);

  // 组件渲染内容
  return (
    // 使用StatefulCalculationCard包裹动态输入表单，提供状态管理和计算功能
    <StatefulCalculationCard
      title={title} // 传递卡片标题
      formKey={formKey} // 传递表单唯一键，用于状态隔离
      initialValues={formInitialValues} // 传递计算出的初始值
      renderFormFields={() => ( // 渲染表单字段的回调函数
        <DynamicInputForm
          minInputs={minInputs}
          maxInputs={maxInputs}
          defaultInputValue={defaultInputValue}
          inputLabelFormatter={inputLabelFormatter}
          fixedParameters={fixedParameters}
          disableAddInput={disableAddInput}
          disableRemoveInput={disableRemoveInput}
        />
      )}
      calculationType={calculationType} // 传递计算类型
      resultFormatter={resultFormatter} // 传递结果格式化函数
      columnCount={columnCount}
      tableHeight={tableHeight} // 传递结果表格高度
      formula={formula} // 传递计算公式
    />
  );
};

export default DynamicCard;